<template>
  <div>
    <Header>
      <div class="head-btns" style="float:left">
        <el-button size="small" @click="$emit('out')">
          返回
        </el-button>
      </div>
      <div v-if="pType === 'add'">
        <div>
          <el-button size="small" type="primary" @click="pType = 'edit'"
            >返回管理商品</el-button
          >
          <el-button size="small" type="primary" @click="addAll({}, 'all')"
            >批量添加</el-button
          >
        </div>
        <div style="margin-top:10px;">
          <el-cascader
            v-model="selectValue"
            :options="options"
            :props="defaultProps"
            class="form-input"
            size="small"
            change-on-select
          ></el-cascader>
          &nbsp;&nbsp;
          <el-checkbox v-model="checked">只显示上架商品</el-checkbox>
        </div>
      </div>
      <div v-if="pType === 'edit'" style="float:left">
        <el-button size="small" type="primary" @click="pType = 'add'"
          >添加活动商品</el-button
        >
        <el-button size="small" type="primary" @click="delAll"
          >批量移除</el-button
        >
      </div>
      <div class="heads-right" style="width:25%;">
        <div v-if="pType === 'add'">
          销售价格&nbsp;&nbsp;&nbsp;
          <el-input-number
            v-model="num1"
            :precision="2"
            :step="1"
            :min="0"
            :controls="false"
            size="small"
          ></el-input-number>
          <span>-</span>
          <el-input-number
            v-model="num2"
            :precision="2"
            :step="1"
            :min="num1"
            :controls="false"
            size="small"
          ></el-input-number>
        </div>
        <div :style="pType === 'add' ? 'margin-top:10px;' : ''">
          <el-input v-model="searchName" placeholder="请输入名称" size="small">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchTag"
            ></el-button>
          </el-input>
        </div>
      </div>
    </Header>
    <div v-if="pType === 'add'">
      <!-- <div class="list-title">
          {{ pType === "add" ? "新增活动商品" : "活动商品列表" }}
          :style="pType === 'add' ? 'height:90px;' : ''"
        </div> -->
      <list-data-one
        :list-data="listDataAdd"
        :total="totalsAdd"
        @returnVal="returnVal"
        @returnValAll="returnValAll"
      />
      <Footer :total="totalsAdd">
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="totalsAdd"
          @current-change="changesAdd"
        >
        </el-pagination>
      </Footer>
    </div>
    <div v-if="pType === 'edit'">
      <!-- <div class="list-title">
          {{ pType === "add" ? "新增活动商品" : "活动商品列表" }}
          :style="pType === 'add' ? 'height:90px;' : ''"
        </div> -->
      <list-data-two
        :assemble-id="assembleId"
        :list-data="listDataEdit"
        :total="totalsEdit"
        @returnVal="returnVal"
        @returnValAll="returnValAll"
        @getV="getV"
      />
      <Footer :total="totalsEdit">
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="totalsEdit"
          @current-change="changesEdit"
        >
        </el-pagination>
      </Footer>
    </div>
    <dialogSet
      :visible="visible"
      :assemble-id="assembleId"
      :datas="datas"
      :type-p="typeP"
      :list-type="listType"
      :list-data-all="listDataAll"
      @outDialog="outDialog"
    />
  </div>
</template>
<script>
import { GOODSLISTShop } from "@/service/shop";
import { aGOODSLIST, SHOWONETWO, DELGOODS } from "../../service";

export default {
  components: {
    listDataOne: () => import("./listDataOne"),
    listDataTwo: () => import("./listDataTwo"),
    dialogSet: () => import("./dialogSet")
  },
  props: {
    assembleId: {
      type: String,
      default: ""
    },
    types: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      pType: "",
      visible: false,
      listDataAll: [],
      listDataAdd: [],
      totalsAdd: 0,
      pagesAdd: 1,
      listDataEditAll: [],
      listDataEdit: [],
      totalsEdit: 0,
      pagesEdit: 1,
      checked: false,
      options: [],
      selectValue: "",
      defaultProps: {
        value: "type_id",
        children: "children",
        label: "type_name"
      },
      num1: 0,
      num2: 0,
      searchName: "",
      datas: {},
      typeP: "",
      listType: ""
    };
  },
  watch: {
    pType(v) {
      this.searchName = "";
      this.pagesAdd = 1;
      this.pagesEdit = 1;
      if (v === "add") {
        this.getListAdd();
      } else {
        this.getListEdit();
      }
    }
  },
  created() {
    this.pType = this.types;
    this.getSOT();
  },
  methods: {
    returnVal(e, type, listType) {
      if (listType === "add") {
        this.typeP = type;
      }
      this.datas = e;
      this.listType = listType;
      this.visible = true;
    },
    returnValAll(e, type) {
      if (type === "add") this.listDataAll = e;
      if (type === "edit") this.listDataEditAll = e;
    },
    getV() {
      this.getListEdit();
    },
    async delAll() {
      if (this.listDataEditAll.length <= 0) {
        this.$message.error("请选择商品！");
        return;
      }
      await this.$confirm(
        "是否批量移除? 移除后无法恢复，商品无法参加此活动",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          let arr = [];
          this.listDataEditAll.forEach(ele => {
            arr.push(ele.goods_id);
          });
          DELGOODS({
            id_arr: arr.join(","),
            activity_type: 1,
            activity_id: this.assembleId
          }).then(({ code, msg }) => {
            if (code === 200) {
              this.getV();
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        })
        .catch(() => {
          this.$message.info("已取消!");
        });
    },
    addAll(e, type) {
      if (this.listDataEditAll.length <= 0) {
        this.$message.error("请选择商品！");
        return;
      }
      this.listType = "add";
      this.visible = true;
      this.datas = e;
      this.typeP = type;
    },
    outDialog(v, s) {
      this.visible = v;
      if (s === "submit") {
        if (this.listType === "add") this.getListAdd();
        if (this.listType === "edit") this.getListEdit();
      }
    },
    async getListAdd() {
      await GOODSLISTShop({
        page: this.pagesAdd,
        pageshow: 10,
        goods_name: this.searchName,
        flag: this.checked ? "" : "all",
        lowprice: this.num1,
        upprice: this.num2,
        goods_type: this.selectValue[1]
          ? this.selectValue[1]
          : this.selectValue[0]
      }).then(({ code, data }) => {
        if (code === 200) {
          this.totalsAdd = data.length;
          this.listDataAdd = data.list;
        } else {
          this.listDataAdd = [];
        }
      });
    },
    changesAdd(page) {
      this.pagesAdd = page;
      this.getListAdd();
    },
    async getListEdit() {
      await aGOODSLIST({
        activity_type: "1",
        activity_id: this.assembleId,
        search: this.searchName,
        page: this.pagesAdd,
        pageshow: 10
      }).then(({ code, data }) => {
        if (code === 200) {
          this.totalsEdit = data.count;
          this.listDataEdit = data.list;
        } else {
          this.listDataEdit = [];
        }
      });
    },
    changesEdit(page) {
      this.pagesEdit = page;
      this.getListEdit();
    },
    searchTag() {
      if (this.pType === "add") {
        this.getListAdd();
      } else {
        this.getListEdit();
      }
    },
    async getSOT() {
      await SHOWONETWO().then(({ code, data }) => {
        if (code === 200) {
          this.options = data;
        } else {
          this.options = [];
        }
      });
    }
  }
};
</script>
